<template>
  <view v-if="list.length" :class="['comment', { commentMore: !more }]">
    <!-- 评论 -->
    <view class="pinglun_top" v-if="more">
      <view class="left font14333">{{
        `用户评论（${commentTotal || total || 0}条）`
      }}</view>
      <view @click="pinglun_more()" class="right font14999">更多 </view>
    </view>
    <!-- <uv-loading-icon mode="semicircle" v-if="!list.length"></uv-loading-icon> -->
    <scroll-view
      class="scroll-view"
      :scroll-with-animation="true"
      @scrolltolower="onReachBottom"
      scroll-x="false"
      scroll-y="true"
      :show-scrollbar="false"
      :style="{ height: more ? '100%' : 'calc(100vh - 44px)' }"
    >
      <view class="pinglun" v-for="(item, index) in list" :key="index">
        <view :class="['right', { p20: !more }]">
          <view class="right_top font14999">
            <view class="about">
              <uv-image
                width="26px"
                height="26px"
                src="https://lehuopai-1311286543.cos.ap-guangzhou.myqcloud.com/img/sns_logo.png"
                shape="circle"
              ></uv-image>
              <view class="user_name">{{
                item?.user?.phone?.includes("15")
                  ? "匿名用户"
                  : item?.user?.phone
              }}</view>
            </view>
            <view class="time font12999">{{ item.created_at }}</view>
          </view>
          <view class="info font14666">{{ item.content }}</view>
          <view class="d-img">
            <uv-image
              customStyle="padding: 7rpx 20rpx 7px 0;"
              class="img"
              v-for="(e, i) in item.pictures"
              @click="imageClick(i, item.pictures)"
              width="92px"
              height="92px"
              :src="e"
              radius="10px"
            ></uv-image>
          </view>
        </view>
      </view>
      <uv-load-more
        v-if="!!list.length && !more"
        customStyle="padding-bottom: 20px;"
        :status="loading"
        loadingIcon="semicircle"
        line
      />
    </scroll-view>
  </view>
</template>

<script>
import { shopApicommentList } from "@/api/shopApi/index";
export default {
  name: "Comment",
  props: ["commentlist", "commentTotal", "shopId", "more"],
  data() {
    return {
      list: [],
      page: 1,
      per_page: 20,
      total: 0,
      loading: "loadmore",
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.inint();
  },
  mounted() {
    if (this.more) {
      this.list = this.commentlist.slice(0, 2);
    }
  },
  methods: {
    async inint() {
      this.loading = "loading";
      const param = {
        uuid: this.id,
        page: this.page,
        per_page: this.per_page,
      };
      const { data } = await shopApicommentList(param);
      if (data.error_code === 0) {
        this.total = data.data?.total;
        this.list = this.list.concat(data.data?.data);
      }
      this.loading = "nomore";
    },
    onReachBottom() {
      if (this.total <= this.list.length) {
        //总条数等于当前返回条数
        // uni.showToast({
        //   title: "没有更多内容了~",
        //   icon: "none",
        // });
      } else {
        // uni.showToast({
        //   title: "加载中...",
        //   icon: "none",
        // });
        this.page = this.page + 1;
        this.inint();
      }
    },
    imageClick(i, impList) {
      uni.previewImage({
        current: i,
        urls: impList,
      });
    },
    pinglun_more() {
      uni.navigateTo({
        url: `/pages/shop/components/comment?id=${this.shopId}`,
      });
    },
    leftClick() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f9f9f9;
}
.commentMore {
  background: #f9f9f9;
  // padding: 20px 0;
  height: 100%;
}
.pinglun .right {
  background: #fff;
  border-radius: 10px;
}
.scroll-view {
  width: 100%;
}
.p20 {
  padding: 20px;
  margin-bottom: 20px;
}

.comment {
  color: #fff;

  .d-img {
    padding-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
  }

  .pinglun_top {
    width: 92%;
    padding: 0 4%;
    height: 80rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .pinglun_top .right {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .pinglun {
    width: 92%;

    margin: 0 auto;
    // margin-top: 20rpx;
  }

  .pinglun .left {
    width: 15%;
    padding-left: 4%;
  }

  .pinglun .left image {
    width: 100%;
    border-radius: 10rpx;
  }

  .right_top .about {
    display: flex;
    align-items: center;

    .user_name {
      padding-left: 10px;
      color: #666;
    }
  }

  .pinglun .right_top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 50rpx;
    align-items: center;
    padding: 5px 0;
  }

  .pinglun .right_top .xing {
    color: #f00;
    font-weight: bold;
    margin-right: 10rpx;
  }

  .pinglun .info {
    margin-top: 10rpx;
    line-height: 40rpx;
  }
}
</style>
